<template>
    <div id="login">
    <el-form
    ref="ruleFormRef"
    :model="loginForm"
    :rules="rules"
  >
    <el-form-item  prop="username">
      <el-input v-model="loginForm.username"  :prefix-icon="Avatar"/>
    </el-form-item>
    <el-form-item prop="password">
      <el-input v-model="loginForm.password" :prefix-icon="Lock" type="password"/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="logincg()">登入</el-button>
      <el-button type="info" @click="rsest()">重置</el-button>
    </el-form-item>
    </el-form>
</div>
    </template>

<script setup>
import { reactive, toRefs, ref } from "vue"
import { Avatar, Lock } from '@element-plus/icons-vue'
import axios from "axios"
import { ElMessage } from 'element-plus'
import router from "../router/router"
let ress = reactive({
    loginForm: {
        username: "",
        password: ""
    }
})
//验证
let rules = reactive({
    username: [
        { required: true, message: "请输入用户名", trigger: 'blur' },
        { min: 3, max: 10, message: "字符长度在3-10", trigger: 'blur' }
    ],
    password: [
        { required: true, message: "请输入密码", trigger: 'blur' },
        { min: 6, max: 15, message: "字符长度在6-15", trigger: 'blur' }
    ]
})
let { loginForm } = toRefs(ress)
let ruleFormRef = ref()
//点击重置
function rsest() {
    ruleFormRef.value.resetFields()
}
//点击登入
function logincg() {
    ruleFormRef.value.validate((bool) => {
        if (!bool) return
        let params = {
            userName: ress.loginForm.username,
            userPwd: ress.loginForm.password
        }
        axios.post("/user/login", params).then((res) => {
            console.log(res)
            if (res.data.code === 1) return ElMessage.error("登入失败")
            window.sessionStorage.setItem("taken", res.data.myToken)
            router.push("/")

        })
    })
}
</script>

<style scoped>
#login {
    width: 450px;
    height: 200px;
    background-color: #fff;
    border-radius: 3px;
    margin: 200px auto
}
</style>